{% extends "base.html" %}

{% load static %}

{% block title %}Каталог{% endblock %}

{% block content %}
  <div class="container">
    <div class="header">
      <h1>Каталог</h1>
    </div>

    <div class="sort-block">
      <span class="sort-item">Сортировать по:</span>
      <!-- Передача параметров сортировки -->
      <a class="sort-item" href="?sort=name">названию</a>
      <a class="sort-item" href="?sort=min_price">начиная с дешёвых</a>
      <a class="sort-item" href="?sort=max_price">начиная с дорогих</a>
    </div>

    <div class="content">
      
      {% include "pagination.html" with page=phones %}
      {% for phone in phones %}
        <div class="phone">
          <a href="{% url 'phone' phone.slug %}">
            <h3>{{ phone.name }}</h3>
          </a>
          <div class="price">Стоимость: {{ phone.price }} ₽</div>
          <img height="400" src="{{ phone.image }}" alt="{{ phone.name }}"/>
        </div>
      {% endfor %}      
    </div>
  </div>
{% endblock %}

